<template>
	<div>
		<div class="title">周末去哪儿</div>
		<div class="item-wrapper" v-for="item of weekendList" :key="item.key">
			<div class="item-img-wrapper">
				<img :src="item.imgUrl" >
			</div>
			<p>{{item.title}}</p>
			<p>{{item.desc}}</p>
		</div>
	</div>
</template>

<script>
	export default{
		name:'homeWeekend',
		props:{
			weekendList:Array,
		},
	}
</script>

<style scoped>
	.title{
		width: 100%;
		height: .8rem;
		line-height: .8rem;
		text-indent: .2rem;
		background-color: #eee;
	}

	.item-img-wrapper{
		width: 100%;
		height: 0;
		overflow: hidden;
		padding-bottom: 38%;
	}

	.item-img-wrapper>img{
		width: 100%;
	}

	.item-wrapper>p:nth-child(2){
		width: 100%;
		height: .54rem;
		line-height: .54rem;
		font-size: .32rem;
		text-indent: .1rem;
	}

	.item-wrapper>p:last-child{
		width: 100%;
		height: .4rem;
		line-height: .4rem;
		color: #ccc;
		text-indent: .1rem;
		padding-bottom: .2rem;
	}















</style>